Day22 [SESSION、檔案處理、電子郵件處理範例-2]

2017 iT 邦幫忙鐵人賽

DAY 23

Modern Web

網頁程式設計so easy系列第 23 篇

2017鐵人賽

smallone1

2016-12-23 22:43:12

2915 瀏覽

分享至

saveAndSend.php(顯示表單頁)

程式碼：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>saveAndSend.php</title>
	<script src="http://code.jquery.com/jquery-3.1.1.min.js">
	</script>
</head>
<body>
	<h1>Basic Information</h1>
	<hr>
<?php
session_start();
$_SESSION["name"] = $_POST["name"];
$_SESSION["tel"] = $_POST["tel"];
$_SESSION["birthday"] = $_POST["birthday"];
$_SESSION["email"] = $_POST["email"];
$_SESSION["address"] = $_POST["address"];
print "姓名: <span id='name'>".$_SESSION["name"]."</span><br/>";
print "電話: <span id='tel'>".$_SESSION["tel"]."</span><br/>";
print "生日: <span id='birthday'>".$_SESSION["birthday"]."</span><br/>";
print "EMail: <span id='email'>".$_SESSION["email"]."</span><br/>";
print "地址: <span id='address'>".$_SESSION["address"]."</span><br/>";
?>
	<br>
	<input type="button" id="SaveToCsv" value="儲存至檔案"/>
	<input type="button" id="Send" value="寄送"/>
	<br><br>
	<input type="button" name="back" onclick="location.href='form.html'" value="重新填寫"/>
	<hr>
	<div id="result"></div>
	<script>
		
		$('#SaveToCsv').click(function(){
			/*如果要使用javaScript儲存至檔案，寫在這裡。*/

        	$.ajax({
                url: "save.php",
                data: {
                	name: $('#name').text(),
     				tel: $('#tel').text(),
					birthday: $('#birthday').text(),
					email: $('#email').text(),
					address: $('#address').text()
                },
                type:"POST",
                dataType:'text',

                success: function(msg){
                    $('#result').text("儲存成功！");
                },

                 error:function(xhr, ajaxOptions, thrownError){ 
                    alert(xhr.status); 
                    alert(thrownError); 
                 }
            });

		});

		$('#Send').click(function(){
			/*如果要使用javaScript寄email，寫在這裡。*/
            
			$.ajax({
                url: "send.php",
                data: {
                	name: $('#name').text(),
     				tel: $('#tel').text(),
					birthday: $('#birthday').text(),
					email: $('#email').text(),
					address: $('#address').text()
                },
                type:"POST",
                dataType:'text',

                success: function(msg){
                    $('#result').text("寄送成功！");
                },

                 error:function(xhr, ajaxOptions, thrownError){ 
                    alert(xhr.status); 
                    alert(thrownError); 
                 }
            });

		});

	</script>
</body>
</html>

參考：http://www.w3schools.com/jquery/jquery_ajax_get_post.asp

https://blog.wu-boy.com/2011/04/%E4%BD%A0%E4%B8%8D%E5%8F%AF%E4%B8%8D%E7%9F%A5%E7%9A%84-json-%E5%9F%BA%E6%9C%AC%E4%BB%8B%E7%B4%B9/

https://blog.wu-boy.com/2008/09/jquery-ajax-%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-%E4%B8%80-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8-json-%E9%A9%97%E8%AD%89%E4%BD%BF%E7%94%A8%E8%80%85%E8%A1%A8%E5%96%AE/

http://www.smalljacky.com/programming-language/php/ajax-javascript-jquery-example-for-php/